<template>
  <el-container>
    <el-header>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统设置</el-breadcrumb-item>
        <el-breadcrumb-item>校区设置</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <el-main>
      <el-card>
        <div class="system_title">
          <h4>可管理校区数：{{tableData.length}} 个</h4>
          <p @click="addDialogVisible=true">添加</p>
        </div>

        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="num" label="校区代码" width="80px"></el-table-column>
          <el-table-column prop="name" label="校区名称" width="180px"></el-table-column>
          <el-table-column prop="address" label="地址" width="300px"></el-table-column>
          <el-table-column prop="tell" label="校区电话" width="180px"></el-table-column>
          <el-table-column prop="mobile" label="校区座机" width="150px"></el-table-column>
          <el-table-column prop="date" label="创建时间"></el-table-column>
          <el-table-column label="操作" width="120px">
            <template slot-scope="scope">
              <!-- 编辑按钮 -->
              <el-button
                type="primary"
                icon="el-icon-edit"
                @click="showEditDialog(scope.$index,scope.row)"
                size="small"
              ></el-button>
              <!-- 删除按钮 -->
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="deleteSchool(scope.$index,scope.row)"
                size="small"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 添加用户开始 -->
      <el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
        <!-- 内容主题 -->
        <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
          <el-form-item label="代码" prop="num">
            <el-input v-model="addForm.num"></el-input>
          </el-form-item>

          <el-form-item label="校名" prop="name">
            <el-input v-model="addForm.name"></el-input>
          </el-form-item>

          <el-form-item label="地址" prop="address">
            <el-input v-model="addForm.address"></el-input>
          </el-form-item>

          <el-form-item label="手机号" prop="tell">
            <el-input v-model="addForm.tell"></el-input>
          </el-form-item>

          <el-form-item label="座机" prop="mobile">
            <el-input v-model="addForm.mobile"></el-input>
          </el-form-item>

          <el-form-item label="时间" prop="date">
            <el-input v-model="addForm.date"></el-input>
          </el-form-item>
        </el-form>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addSchool">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 添加用户结束 -->

      <!-- 修改用户对话框开始 -->
      <el-dialog title="修改信息" :visible.sync="editDialogVisible" width="50%">
        <!-- 内容主题 -->
        <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
          <el-form-item label="代码">
            <el-input v-model="editForm.num" disabled></el-input>
          </el-form-item>

          <el-form-item label="手机号" prop="tell">
            <el-input v-model="editForm.tell"></el-input>
          </el-form-item>

          <el-form-item label="座机" prop="mobile">
            <el-input v-model="editForm.mobile"></el-input>
          </el-form-item>
        </el-form>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveEdit">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改用户对话框结束 -->
    </el-main>
  </el-container>
</template>
<script>
export default {
  name: "system-item2",
  data() {
    // 验证手机号规则
    var checkTell = (rule, value, cb) => {
      // 验证手机号的正则
      const regTell = /^1[3456789]\d{9}$/;
      if (regTell.test(value)) {
        return cb();
      }
      cb(new Error("请输入合法的手机号码"));
    };
    //验证座机号码规则
    var checkMobile = (rule, value, cb) => {
      // 验证手机号的正则
      const regMobile = /^[+]{0,1}(\d){1,4}[ ]{0,1}([-]{0,1}((\d)|[ ]){1,12})+$/;
      if (regMobile.test(value)) {
        return cb();
      }
      cb(new Error("请输入合法的座机号码"));
    };
    var checkDate = (rule, value, cb) => {
      // 验证手机号的正则
      const regDate = /^((?!0000)[0-9]{4}-((0[1-9]|1[0-2])-(0[1-9]|1[0-9]|2[0-8])|(0[13-9]|1[0-2])-(29|30)|(0[13578]|1[02])-31)|([0-9]{2}(0[48]|[2468][048]|[13579][26])|(0[48]|[2468][048]|[13579][26])00)-02-29)$/;
      if (regDate.test(value)) {
        return cb();
      }
      cb(new Error("请输入合法的时间格式"));
    };
    return {
      tableData: [
        {
          num: 2343,
          name: "五彩艺术学校罗湖校区",
          address: "罗湖区罗沙公路经二路1号(罗湖体育局对面)",
          tell: 13164648770,
          mobile: "--",
          date: "2016-09-21  08:50:08",
        },
        {
          num: 2344,
          name: "五彩艺术学校盐田校区",
          address: "广东省深圳市盐田区盐田医院对面",
          tell: 13544105916,
          mobile: "0551-2922342",
          date: "2016-09-21  08:50:08",
        },
        {
          num: 2345,
          name: "五彩艺术学校福田校区",
          address: "福田区新洲南路石厦四街233号",
          tell: 17152707196,
          mobile: "--",
          date: "2016-09-21  08:50:08",
        },
      ],
      // 控制添加用户显示框的显示隐藏
      addDialogVisible: false,
      // 控制修改学校信息显示隐藏
      editDialogVisible: false,
      // 添加用户的表单数据
      addForm: {
        num: "",
        name: "",
        address: "",
        tell: "",
        mobile: "",
        date: "",
      },
      // 添加表单的验证规则对象

      addFormRules: {
        num: [
          { required: true, message: "请输入校区代码", trigger: "blur" },
          { min: 4, max: 4, message: "长度4个字符", trigger: "blur" },
        ],
        name: [
          { required: true, message: "请输入校区名称", trigger: "blur" },
          {
            min: 5,
            max: 15,
            message: "长度在 5 到 15 个字符",
            trigger: "blur",
          },
        ],
        address: [
          { required: true, message: "请输入校区名称", trigger: "blur" },
          {
            min: 5,
            max: 20,
            message: "长度在 5 到 20 个字符",
            trigger: "blur",
          },
        ],
        tell: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { validator: checkTell, trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入座机号码", trigger: "blur" },
          { validator: checkMobile, trigger: "blur" },
        ],
        date: [
          {
            required: true,
            message: "正确格式为：yyyy-mm-dd",
            trigger: "blur",
          },
          { validator: checkDate, trigger: "blur" },
        ],
      },

      // 编辑表单数据
      editForm: {
        num: "",
        tell: "",
        mobile: "",
      },
      editFormRules: {
        tell: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { validator: checkTell, trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入座机号码", trigger: "blur" },
          { validator: checkMobile, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 监听添加用户对话框的关闭时间
    addDialogClosed() {
      this.$refs.addFormRef.resetFields();
    },
    // 添加学校信息
    addSchool() {
      this.$refs.addFormRef.validate((valid) => {
        if (!valid) return;
        // 可以发起用户网络请求
        localStorage.setItem("num", this.addForm.num);
        localStorage.setItem("name", this.addForm.name);
        localStorage.setItem("address", this.addForm.address);
        localStorage.setItem("tell", this.addForm.tell);
        localStorage.setItem("mobile", this.addForm.mobile);
        localStorage.setItem("date", this.addForm.date);
        this.tableData.push({
          num: localStorage.getItem("num"),
          name: localStorage.getItem("name"),
          address: localStorage.getItem("address"),
          tell: localStorage.getItem("tell"),
          mobile: localStorage.getItem("mobile"),
          date: localStorage.getItem("date"),
        });
        this.addDialogVisible = false;
      });
    },
    // 删除学校信息
    deleteSchool(id,row) {
     // 二次确认删除
      this.$confirm("此操作将会永远删除数据,确定要删除吗？","提示", {
        type: "warning",
      })
        .then(() => {
          this.$message.success("删除成功");
          this.tableData.splice(id, 1);
        })
        .catch(() => {});
    },
    // 修改学校信息信息
    showEditDialog(id, row) {
      this.index = id;
      this.editForm = row;
      this.editDialogVisible = true;
    },
    // 保存编辑
    saveEdit() {
      this.editDialogVisible = false;
      this.$message.success(`修改成功`);
      this.$set(this.tableData, this.editForm);
    },
  },
};
</script>
<style scoped>
.cell {
  color: #000;
}
th {
  background: #fafafa !important;
}
.el-breadcrumb {
  line-height: 65px;
  font-size: 14px;
  font-weight: normal;
}
.system_title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}
.system_title h4 {
  font-size: 16px;
  font-weight: normal;
}
.system_title p {
  font-size: 16px;
  font-weight: normal;
  color: #fff;
  cursor: pointer;
  padding: 8px 16px;
  background: red;
  border-radius: 6px;
}
.el-form-item {
  font-size: 8px;
}
</style>
